import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

import 'overscroll_config/overscroll_config.dart';

class CustomChartTest extends StatefulWidget {
  final double height;
  final double width;
  final bool show2;

  CustomChartTest({Key key, this.height = 200, this.width, this.show2 = true}) : super(key: key);

  @override
  _CustomChartTestState createState() => _CustomChartTestState();
}

class _CustomChartTestState extends State<CustomChartTest> {

  final ScrollController _scrollController = new ScrollController();

  bool show = false;

  @override
  void initState() {
    _scrollController.addListener(() {
      // print(_scrollController.position.pixels);
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      height: widget.height,
      width: widget.width == null ? MediaQuery.of(context).size.width : widget.width,
      color: Colors.grey,
      child: CustomPaint(
        painter: AxisPainter(),
        child: ScrollConfiguration(
          behavior: OverScrollBehavior(),
          child: SingleChildScrollView(
            controller: _scrollController,
            scrollDirection: Axis.horizontal,
            child: GestureDetector(
              onTapDown: (details) {
                // print("onTapDown" + details.globalPosition.toString());
              },
              onTapUp: (details) {
                print("onTapUp" + details.globalPosition.toString());
                setState(() {
                  show = !show;
                });
              },
              child: CustomPaint(
                size: Size(500, 200),
                painter: RectanglePainter(show: show, show2: widget.show2),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

class AxisPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {}

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return true;
  }
}

class RectanglePainter extends CustomPainter {
  final bool show;
  final bool show2;

  // 指定绘制的样式
  final Paint painter = Paint()
    ..color = Colors.orange
    ..strokeWidth = 4.0
    ..style = PaintingStyle.stroke
    ..isAntiAlias = true;

  RectanglePainter({
    this.show = false,
    this.show2,
  });

  @override
  void paint(Canvas canvas, Size size) {
    // 定义一个矩形
    final Rect rect1 = Rect.fromLTWH(50.0, 50.0, 100.0, 100.0);

    final Rect rect2 = Rect.fromLTWH(160.0, 50.0, 100.0, 100.0);

    final Rect rect3 = Rect.fromLTWH(260.0, 50.0, 100.0, 100.0);
    final Rect rect4 = Rect.fromLTWH(360.0, 50.0, 100.0, 100.0);
    final Rect rect5 = Rect.fromLTWH(460.0, 50.0, 100.0, 100.0);

    // 使用 drawRect 绘制矩形
    canvas.drawRect(rect1, painter);
    canvas.drawRect(rect2, painter);
    canvas.drawRect(rect3, painter);
    canvas.drawRect(rect4, painter);
    canvas.drawRect(rect5, painter);

    if (show) {
      canvas.drawCircle(Offset(30, 30), 30, painter);
    }

    if (show2) {
      canvas.drawCircle(Offset(30, 80), 30, painter);
    }
  }

  @override
  bool shouldRepaint(RectanglePainter oldDelegate) {
    print("shouldRepaint");
    return true;
  }
}
